<template>
    <!-- 最大的盒子开始 -->
    <div class="productDetail">
        <!-- 头部轮播开始 -->
        <!-- productSildeList -->
        <div class="bannerBox">
        <div class="slider" v-if="productSildeList">
            <!-- 轮播图效果 -->
            <van-swipe @change="onChange" class="my-swipe">
              <van-swipe-item  v-for="(item,index) in productSildeList" :key="index">
                <img :src="item" alt="">
              </van-swipe-item>
              
              <template #indicator>
                <!--  插槽 自定义 小圆点 -->
                <div class="custom-indicator">
                    <ol class="dios">
                        <li v-for="num in productSildeList.length" :key="num" :class="{'con':indexSwiper==(num-1)}"></li>
                    </ol>
                </div>
              </template>
            </van-swipe>
            <!-- 左上图标 -->
            <router-link to="/home" tag="div" class="lefticon">
                <i data-v-54267b00="" class="vip-icon back-btn icon-back"></i>
            </router-link>
            <!-- 右上图标 -->
            <div :class="['righticon',{'hasfav':collect}]">
                <i @click="collectFun" :class="['vip-icon','fav-btn','icon-addcollect',{'icon-heart-ed':collect} ]"></i>
                <i @click="showShare = true" class="vip-icon share-btn icon-share"></i>
            </div>
            <!-- 图标 -->
            <div class="iconSli">
                <img src="../assets/image/detail/icon01.png" alt="">
                <div class="titleSli">9月8日上架</div>
            </div>
        </div>
        <van-share-sheet
          v-model="showShare"
          title="立即分享给好友"
          :options="shareoptions"
          @select="onSelect"
        />
        </div>
        <!-- 头部轮播结束 -->
        <!-- 商品价格开始 -->
        <div class="price">
            <div class="wrap">
                <!-- 左边部分 -->
                <div class="leftp">
                    <!-- 左边的上部分 -->
                    <div class="leftph">
                        <span>¥{{maxPrice}}<i>起</i></span>
                        <div class="lebg">
                            <img src="../assets/image/detail/下载.png" alt="">
                            <span><b>特卖价</b>￥{{minPrice | minPriceInt}}<i>起</i></span>
                        </div>
                    </div>
                    <!-- 左边的下部分 -->
                    <div class="leftpb">
                        <span>¥{{maxPrice}}</span>
                        <span>{{discounts}}折起</span>
                    </div>
                </div>
                <!-- 右边部分 -->
                <div class="rightp">
                    <!-- 右边的上半部分 -->
                    <div class="righth">
                        <img src="../assets/image/detail/三折.png" alt="">
                    </div>
                    <!-- 右边的下半部分 -->
                    <div class="rightb">
                        <van-count-down :time="time">
                          <template #default="timeData">
                            <span class="countRightb">{{ timeData.days }}</span>
                            <span class="countRightb">天</span>
                            <span class="countRightb">{{ timeData.hours }}</span>
                            <span class="countRightb">小时</span>
                            <!-- <span class="countRightb">{{ timeData.minutes }}</span>
                            <span class="countRightb">分</span> -->
                            <span class="countRightb">后结束</span>
                          </template>
                        </van-count-down>
                    </div>
                </div>
            </div>
        </div>
        <!-- 商品价格结束 -->
        <!-- 商品内容开始 -->
        <div class="shopcontent">
            <div class="conheader">
                <span>{{shopName}}|</span>
                <span>{{productTitle}}</span>
            </div>
            <div class="conbottom">
                <div><span>七天无理由退货</span></div>
                <div><span>首单38包邮</span></div>
                <div><span>上门退货</span></div>
            </div>
        </div>
        <!-- 商品内容结束 -->
        <!-- 白边 -->
        <div class="bgwhite"></div>
        <!-- 产品保证开始 -->
        <div class="product-guaranteed">
            <div class="leftImg">
                <img class="auto-img" src="https://h2.appsimg.com/b.appsimg.com/upload/mst/2021/05/18/134/d4b7a9b386036cc28828d53777850bb3.png" alt="">
            </div>
            <div class="middle">官方自营 · 中国人保承保</div>
            <div class="rightIcon">
                <i data-v-67bec326="" data-v-12bde830="" class="icon-arrow-right"></i>
            </div>
        </div>
        <!-- 产品保证结束 -->
         <!-- 白边 -->
         <div class="bgwhite"></div>
        <!-- 产品尺码颜色开始 -->
        <div class="product-sku">
            <div class="product-sku-color">
                <div class="sku-color-hd">颜色</div>
                <div class="sku-color-content">
                    <img :src="image" alt="">
                    <span>{{color}}</span>
                    <i data-v-128066d9="" class="vip-icon checked icon-filter-checked"></i>
                </div>

            </div>
            <div class="product-sku-size">
                <div class="sku-size-hd">
                    <div class="sku-size-title">尺码</div>
                    <div class="sku-size-link">查看尺码表</div>
                </div>
                <div class="sku-size-content" v-if="stockNum">
                    <div :class='["vip-grid-option", {"checked":checkNum == index },{"con":!item.num}]' @click=check(index) v-for="(item,index) in stockNum" :key="index">
                        <span>{{item.size}}</span>
                        <i class="vip-icon checked icon-filter-checked"></i>
                    </div>
                </div>
            </div>
        </div>
        <!-- 产品尺码颜色结束 -->
         <!-- 白边 -->
         <div class="bgwhite"></div>
         <!-- 产品参数开始 -->
         <div class="product-param-container">
            <div class="product-param">
                <div class="product-param-title">商品参数</div>
                <div class="product-param-text">风格、流行元素、适用场景等</div>
            </div>
            <span @click="param = true">...</span>
            <van-popup v-model="param"  position="bottom" round class="product-param-span">
                <div class="popup-header">
                    商品参数
                </div>
                <div class="popup-content">
                    <ul class="pop-content">
                        <li v-for="(item,index) in productParamList" :key="index">
                            <div class="pop-content-left">{{item.name}}</div>
                            <div class="pop-content-right">{{item.param}}</div>
                        </li>
                        
                    </ul>
                </div>
                <div class="popup-footer">
                    <div class="pop-ft" @click="param = false">
                        知道了
                    </div>
                </div>
            </van-popup>
         </div>
         <!-- 产品参数结束 -->
         <!-- 白边 -->
         <div class="bgwhite"></div>
         <!-- 产品地址开始 -->
         <div class="product-address">
            <div class="product-address-name">
                <div class="product-address-title">配送至</div>
                <span @click="showPopupAddress" class="product-address-text">{{fieldValue}}</span>
                <van-popup v-model="show"  position="bottom" round >
                     <van-cascader
                      v-model="cascaderValue"
                      title="请选择收货地址"
                      placeholder="请选择"
                      :options="options"
                      @close="show = false"
                      @finish="onFinish"
                    />
                </van-popup>
                <i data-v-fa1b34b6="" class="vip-icon address-icon icon-gps"></i>
            </div>
            <p class="deliver" v-show="flag" >现在付款，最快{{deliveryTime1}}发货，{{deliveryTime2}}送达</p>
         </div>
         <!-- 产品地址结束 -->
         <!-- 产品运费开始 -->
         <div class="product-freight">
            <div class="freight">
                <div class="freight-title">运费</div>
                <div class="freight-text">订单满88包邮</div>
                <span @click="freight = true">...</span>
                <van-popup v-model="freight"  position="bottom" round class="product-freight-span">
                    <div class="popup-header">
                        运费说明
                    </div>
                    <div class="popup-content">
                        <div class="pop-content">
                            自营商品订单金额满88元免运费。如订单商品在退货后不满足免运费政策，
                            则需您支付购买时的发货运费5元，该运费将从退款金额中直接扣除。
                        </div>
                    </div>
                    <div class="popup-footer">
                        <div class="pop-ft" @click="freight = false">
                            知道了
                        </div>
                    </div>
                </van-popup>
            </div>
         </div>
         <!-- 产品运费结束 -->
          <!-- 白边 -->
          <div class="bgwhite"></div>
          <!-- 产品服务开始 -->
          <div class="product-services">
            <div class="services-bar">
                <ul class="services-list">
                    <li class="service">
                        <i class="vip-icon icon icon-success success"></i>
                        <span>七天无理由退货</span>
                    </li>
                    <li class="service">
                        <i data-v-37ec7006="" class="vip-icon icon icon-success success"></i>
                        <span>7天可换</span>
                    </li>
                    <li class="service">
                        <i data-v-37ec7006="" class="vip-icon icon icon-success success"></i>
                        <span>上门退货</span>
                    </li>
                    <li class="service">
                        <i data-v-37ec7006="" class="vip-icon icon icon-success success"></i>
                        <span>极速退款</span>
                    </li>
                    <li class="service">
                        <i data-v-37ec7006="" class="vip-icon icon icon-success success"></i>
                        <span>破损无忧</span>
                    </li>
                    <li class="service">
                        <i data-v-37ec7006="" class="vip-icon icon icon-success success"></i>
                        <span>唯品会发货</span>
                    </li>
                    <li class="service">
                        <i data-v-37ec7006="" class="vip-icon icon icon-success success"></i>
                        <span>15天质量退</span>
                    </li>
                    <li class="service">
                        <i data-v-37ec7006="" class="vip-icon icon icon-success success"></i>
                        <span>正规发票</span>
                    </li>
                    <li class="service">
                        <i data-v-37ec7006="" class="vip-icon icon icon-success success"></i>
                        <span>唯爱心公益计划</span>
                    </li>
                    <li class="service">
                        <i data-v-37ec7006="" class="vip-icon icon icon-success success"></i>
                        <span>10天价保</span>
                    </li>
                </ul>
                <span @click="service = true">...</span>
                <van-popup v-model="service"  position="bottom" round class="product-service-span">
                    <div class="popup-header">
                        服务说明
                    </div>
                    <div class="popup-content">
                        <ul class="pop-content">
                            <li v-for="(item,index) in serviceList" :key="index">
                                <div class="pop-content-left">
                                    <i  class="vip-icon icon icon-success success" ></i>
                                    <span>{{item.name}}</span>
                                </div>
                                <div class="pop-content-right">
                                    <span>{{item.content}}</span>
                                    <i class="vip-icon item-link icon-back"></i>
                                </div>
                            </li>

                        </ul>
                    </div>
                    <div class="popup-footer">
                        <div class="pop-ft" @click="service = false">
                            知道了
                        </div>
                    </div>
                </van-popup>
            </div>
          </div>
          <!-- 产品服务结束 -->
           <!-- 白边 -->
         <div class="bgwhite"></div>
         <!-- 产品品牌开始 -->
         <div class="product-brand">
            <div class="brand-hd">
                <router-link to="/brand" tag="div" class="brand">
                    <div class="brand-logo">
                        <img src="https://h2a.appsimg.com/a.appsimg.com/upload/brandcool/0/LOGO/10000032/bed371bd2c304c61af3e70f492a1110c/primary.png!85.webp" alt="">
                    </div>
                    <div class="brand-info">{{shopName}}</div>
                </router-link>
                <div class="vipButton" @click="showVipFun">
                    <span v-show="showVip">收藏</span>
                    <span v-show="!showVip">已收藏</span>
                </div>
            </div>
            <div class="brand-ft">
                <span>查看品牌</span>
            </div>
         </div>
         <!-- 产品品牌结束 -->
          <!-- 白边 -->
          <div class="bgwhite"></div>
          <!-- 产品提问开始 -->
          <div class="product-qa">
            <div class="top-wrap">
                <div class="title">常见问题</div>
                <div class="more">全部</div>
            </div>
            <div class="bottom-wrap">
                <div class="qa-info1">
                    <span class="qa-question">Q</span>
                    <div class="qa-fold">尺码会不会偏大或偏小？</div>
                </div>
                <div class="qa-info2">
                    <span class="qa-question">A</span>
                    <div class="qa-fold">所售商品尺码偏小，建议买大一码。</div>
                </div>
            </div>
          </div>
          <!-- 产品提问结束 -->
          <!-- 白边 -->
          <div class="bgwhite"></div>
          <!-- 产品图文信息开始 -->
          <div class="product-image">
            <div class="title">图文信息</div>
            <img src="https://h2a.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2022/08/15/111/35469e14-3d66-4d1c-aebe-ff5d5b38adc8.jpg!85.webp" alt="">
            <img src="https://h2a.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2022/08/15/162/3eb3724c-29d4-48ab-8913-68a13bedad1c.jpg!85.webp" alt="">
            <img src="https://h2a.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2022/08/15/114/e1d60890-7678-43a8-8d1d-6f500cdae628.jpg!85.webp" alt="">
            <img src="https://h2a.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2022/08/15/156/21abee74-6ead-46a4-b975-24429e545647.jpg!85.webp" alt="">
            <img src="https://h2a.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2022/08/15/35/9d055b6c-38d9-4a71-9ce0-81741853175c.jpg!85.webp" alt="">
            <img src="https://h2a.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2022/08/15/26/557ff3b6-0b78-46ca-b2c6-37690d062d32.jpg!85.webp" alt="">
            <img src="https://h2a.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2022/08/15/98/bb26ed4e-c1a0-4b3b-af5c-ab2703943fbd.jpg!85.webp" alt="">
            <img src="https://h2a.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2022/08/15/131/19e446a5-327f-4754-8d36-4923a6369a6d.jpg!85.webp" alt="">
            <img src="https://h2a.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2022/08/15/33/906f4961-a864-44be-8104-88ef3b91e475.jpg!85.webp" alt="">
            <img src="https://h2a.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2022/08/15/194/cdbc4574-8bef-419c-a90c-12109900d960.jpg!85.webp" alt="">
            <img src="https://h2a.appsimg.com/a.appsimg.com/upload/category/2021/07/21/91/2fb29465-501e-48b9-9219-ce210d26caf4.jpg!85.webp" alt="">
            <img src="https://h2.appsimg.com/b.appsimg.com/upload/mst/2021/05/07/24/62b678c894ab0a535df08dbeb1b08c85.png" alt="">
            <img src="https://h2.appsimg.com/b.appsimg.com/upload/mcp/2021/12/06/172/163877692038.png" alt="">
          </div>
          <!-- 产品图文信息结束 -->
          <!-- 产品价格说明开始 -->
          <div class="product-sale-price">
            <div class="title">价格说明</div>
            <div class="content">
                <p>1、特卖价：指商品销售价, 是您决定是否购买商品的依据。特卖价可能会根据商品参与特定的活动优惠
                    （补贴、满减、优惠券等）而发生变化，此时唯品会将在页面同时为您标示出商品参与活动优惠后的特卖价。
                </p>
                <!-- <p v-for="(item,index) in salePriceList" :key="index"></p> -->
                <p v-show="!btnAll" v-for="(item,index) in salePriceList" :key="10 + index">{{item}}</p>
               
            </div>
            <div class="btn">
                <span  @click="btnAll = !btnAll" v-show="btnAll">展开全部<i data-v-26297ca4="" class="vip-icon arrow icon-arrow-down"></i></span>
                <span  @click="btnAll = !btnAll" v-show="!btnAll">收起<i data-v-26297ca4="" class="vip-icon arrow icon-arrow-up"></i></span>
            </div>
          </div>
          <!-- 产品价格说明结束 -->
          <!-- 产品指示开始 -->
          <div class="product-indicator">
                —· 已经到底啦，再往上逛逛吧 ·—
          </div>
          <!-- 产品指示结束 -->
          <!-- 白边 -->
          <div class="product-baibian"></div>
          <!-- 产品购物车 -->
          <div class="product-cart">
            <div class="cart-box">
                <div class="product-customer-bar">
                    <div class="custom-icon">
                        <div class="custom-icon__image"></div>
                        <div class="custom-icon__text">客服</div>
                    </div>
                </div>
                <div class="product-cart-icon">
                    <div class="product-cart-icons">
                        <div class="product-cart-icon__image"></div>
                        <router-link tag="div" to="/shopCar" class="product-cart-icon__text">购物车</router-link>
                    </div>
                </div>
                <div class="price-detail">
                    <div class="price-detail__compare-price">
                        <p>¥{{maxPrice}}</p>
                    </div>
                    <div class="price-detail__final-price" @click="add">
                        <p v-if="minPrice">￥{{minPrice  | minPriceInt}}</p>
                        <p>
                            <span>特卖价</span>
                            <span>抢></span>
                        </p>
                    </div>
                </div>
            </div>
          </div>

          <!-- 回到顶部图标 -->
          <div class="topbackicon" v-show="this.backIconsLength > 350" @click="scrollTop">
              <a>
                  <i data-v-9e47b6c0="" class="icon-up"></i>
              </a>
          </div>
    </div>
    <!-- 最大的盒子结束 -->
</template>

<script>

import {getProductDetailSilde} from "../api/productDetail.js"
    export default {
        name:"productDetailView",
        data:function(){
            return {
                id:null,  //商品id
                productSildeList:null,  //轮播图数组
                indexSwiper:0, //轮播图指示点下标
                // 倒计时时间
                time:  null,
                show:false,  //地址栏弹出层按钮
                fieldValue: '请选择配送地址',
                cascaderValue: '',
                options:null, // 选项地址列表，children 代表子选项，支持多级嵌套
                deliveryTime1:null, //送货时间
                deliveryTime2:null, //到达时间
                flag:false,  //送货到达时间的按钮
                stockNum:null, //尺码库存数量
                checkNum:10,   //选中尺码数量
                btnAll:true,  //展开全部按钮
                salePriceList:null,  //价格说明
                backIconsLength:0,  //距离顶部屏幕滚动距离
                param:false,   //商品参数弹出层按钮
                productParamList:null,  //商品参数数组
                freight:false,  //运费说明弹出层按钮
                service:false, //产品服务弹出层按钮
                serviceList:null, //产品服务数组
                showVip:true, //收藏店铺按钮
                collect:false, //收藏商品按钮
                discounts:null, //折扣
                maxPrice:null,   //最高价格
                minPrice:null, //最低价格
                size:null,  //选中的尺码
                image:null, //小图片
                color:null, //颜色
                shopName:null, //店铺名称
                productTitle:null, //商品标题
                showShare: false, //分享面板开关
                shareoptions: [   //分享面板数据
                  [
                    { name: '微信', icon: 'wechat' },
                    { name: '朋友圈', icon: 'wechat-moments' },
                    { name: '微博', icon: 'weibo' },
                    { name: 'QQ', icon: 'qq' },
                  ],
                  [
                    { name: '复制链接', icon: 'link' },
                    { name: '分享海报', icon: 'poster' },
                    { name: '二维码', icon: 'qrcode' },
                    { name: '小程序码', icon: 'weapp-qrcode' },
                  ],
                ],
            }
        },
        methods:{
            // 分享面板
            onSelect(shareoptions){
                 this.$toast(shareoptions.name + "分享成功");
                this.showShare = false;
            },
           onChange(index){
            // 改变轮播图下标
            this.indexSwiper = index;
           },
        //    获取json数据方法
           getProductDetailSildeFun(){
              getProductDetailSilde().then( data =>{
                // console.log(data);   //数据
                this.productSildeList = data.product1.sildeList, //轮播图数据
                this.options = data.addressList, //地址数据
                this.serviceList = data.serviceList,  //商品服务数组
                this.salePriceList = data.product1.salePriceList,  //价格说明信息
                this.stockNum = data.product1.stockList,  //尺码库存尺码
                this.productParamList = data.product1.productParam,  //商品参数
                this.minPrice = data.product1.price.minPrice,  //商品最低价格
                this.maxPrice = data.product1.price.maxPrice, //商品最高价格
                this.discounts = data.product1.price.discounts, //商品折扣
                this.time = parseInt(data.product1.time), //活动持续时间
                this.image = data.product1.image,  //小图片
                this.color = data.product1.color  //颜色
                this.id =  data.product1.id, //商品id
                this.productTitle = data.product1.productTitle,  //商品标题
                this.shopName = data.product1.shopName  //店铺名称
            })
           },
           //  显示地址栏 点击事件方法
           showPopupAddress(){
            this.show = true;
           },
            //地址联动选择  地址数据赋值
           onFinish({ selectedOptions }) {
              this.show = false;
              this.fieldValue = selectedOptions.map((option) => option.text).join('.');
            //   console.log(this.fieldValue);
              // 显示送货时间
              if(this.fieldValue !== "请选择配送地址"){
                // 送货时间的提示文字 显示
                this.flag = true,
                 // 时间处理
                this.deliveryTime1 = new Date()
                let  day = this.deliveryTime1.getDate()
                let  m = this.deliveryTime1.getMonth() + 1 ;
                m = m<10 ? "0"+m : m;
                this.deliveryTime1 = `${m}月${day}号`;
                this.deliveryTime2 = `${m}月${day+2}号`;
              }
            },
            // 尺码选择方法
            check(index){
                // 判断数组是否为null
               if(this.stockNum){
                // console.log(this.stockNum);
                // 判断库存是否有
                if(this.stockNum[index].num !== 0){
                    this.checkNum = index,
                    this.size = this.stockNum[index].size,
                    console.log(this.size);
                }
               }
            },
            // 滚动距离 显示按钮
            scrollFun(){
                window.onscroll = ()=>{
                  this.backIconsLength = window.pageYOffset
                //   console.log(this.backIconsLength);
                //   console.log(this);
               }
            },
            // 滚动到顶部
            scrollTop(){
                window.scrollTo(0,0)
            },
            // 点击收藏和取消收藏按钮  店铺
            showVipFun(){
                let token = window.localStorage.getItem("token");
                // console.log(token);
                // 判断是否登录
                if(!token){
                  this.$router.push("/login");
                  return;
                }

                this.showVip = !this.showVip;
                if(!this.showVip){
                    this.$toast("已添加收藏");
                    window.localStorage.setItem("brand","product1");
                }else{
                    this.$toast("已取消收藏");
                    window.localStorage.removeItem("brand");
                }
               
            },
            // 收藏商品 
            collectFun(){
                
                let token = window.localStorage.getItem("token");
                
                // console.log(token);
                // 判断是否登录
                if(!token){
                  this.$router.push("/login");
                  return;
                }

                this.collect = !this.collect;
                
                if(this.collect){
                    this.$toast("已添加收藏");
                    window.localStorage.setItem("product1","product1");
                }else{
                    this.$toast("已取消收藏");
                    window.localStorage.removeItem("product1");
                }
            },
            // 添加数据到购物车
            add(){
                if(this.size  && this.fieldValue != '请选择配送地址'){
                    this.$emit('add',
                    {
                        "id":this.id,
                        "color":this.color,
                        "size":this.size,
                        "image":this.image,
                        "minPrice":this.minPrice,
                        "fieldValue":this.fieldValue,   //地址数据
                        "shopName":this.shopName,
                        "productTitle":this.productTitle,
                        "checked":true,
                        "num":1,
                        "checkNum":10
                    }
                    );
                    this.$toast("已添加购物车")

                }else if(this.size){
                    if(this.fieldValue == '请选择配送地址'){
                        this.$toast("请选择地址");
                    }
                }else{
                     this.$toast("请选择一个尺码");
                }
            }
        },
       filters:{
          "minPriceInt":function(value){
            return parseInt(value)
          }
        },
        created(){
            this.getProductDetailSildeFun();  //轮播图数据
            // console.log(this);
            let product1 = window.localStorage.getItem("product1")
            if(product1){
                this.collect = true;
            }
            // 收藏店铺
             let brand = window.localStorage.getItem("brand")
            if(brand){
                this.showVip = false;
            }
        },
        mounted(){
            this.scrollFun();
            // console.log(this.minPirce);
        }
    }
</script>

<style lang="scss"  scoped>
.productDetail{


// 产品服务 service
.product-service-span{
    display: flex;
    flex-direction: column;
    .popup-header{
        width: 100%;
        height: 58px;
        text-align: center;
        font-size: 18px;
        line-height: 58px;
        color: #232323;
        border-bottom: 1px solid #f6f6f6;
        

    }
    .popup-content{
        width: 100%;
        height: 345px;
        overflow-y: auto;
        overflow-x: hidden;

        .pop-content{
            display: flex;
            flex-direction: column;
            li{
                display: flex;
                padding: 20px 15px;
                flex-direction: column;
                border-bottom: 1px solid #f6f6f6;
                .pop-content-left{
                    height: 20px;
                    display: flex;
                    align-items: center;   
                   i{
                    color: #e80080;;
                    font-size: 13px;
                   }
                   span{
                    font-size: 15px;
                    margin-left: 7px;
                    color: #232323;
                   }
                   
                }

                .pop-content-right{
                    margin-top: 10px;
                    padding-left: 20px;
                    display: flex;
                    align-items: center;
                    span{
                        color: #98989f;
                        font-size:14px;
                        line-height: 18px;
                    }
                    i{
                        transform: translate3d(0,-50%,0) rotate(180deg);
                        font-size: 20px;
                        color: #ccc;
                    }
                }

                &:last-child{
                    border-bottom: none;
                }
            }

        }
    }

    .popup-footer{
        border-top:1px solid #f6f6f6;
        padding: 11px;
        .pop-ft{
            background-color: #f03867;
            width: 100%;
            height: 42px;
            border-radius: 5px;
            text-align: center;
            font-size: 13px;
            line-height: 42px;
            color: #fff;
        }
    }

}

// 运费说明
.product-freight-span{
    display: flex;
    flex-direction: column;
    .popup-header{
        width: 100%;
        height: 58px;
        text-align: center;
        font-size: 18px;
        line-height: 58px;
        color: #232323;
        border-bottom: 1px solid #f6f6f6;
        
    }
    .popup-content{
        width: 100%;
        height: 155px;
        overflow-y: auto;
        overflow-x: hidden;
        .pop-content{
            padding: 15px;
            display: flex;
            color: #585c64;
            font-size: 14px;
            line-height: 19px;
        }
    }

    .popup-footer{
        border-top:1px solid #f6f6f6;
        padding: 11px;
        .pop-ft{
            background-color: #f03867;
            width: 100%;
            height: 42px;
            border-radius: 5px;
            text-align: center;
            font-size: 13px;
            line-height: 42px;
            color: #fff;
        }
    }

}


// 产品参数
.product-param-span{
    display: flex;
    flex-direction: column;
    .popup-header{
        width: 100%;
        height: 58px;
        text-align: center;
        font-size: 18px;
        line-height: 58px;
        color: #232323;
        border-bottom: 1px solid #f6f6f6;
        

    }
    .popup-content{
        width: 100%;
        height: 345px;
        overflow-y: auto;
        overflow-x: hidden;

        .pop-content{
            li{
                display: flex;
                padding: 12px 15px;
                // height: 20px;
                border-bottom: 1px solid #f6f6f6;
                .pop-content-left{
                    width: 70px;
                    font-size:14px ;
                    line-height: 20px;
                    color: #98989f;
                    margin-right: 15px;
                    // 文本溢出隐藏
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }

                .pop-content-right{
                    width: 70px;
                    font-size:14px ;
                    line-height: 20px;
                    color: #585c64;
                    flex: 1;
                }

                &:last-child{
                    border-bottom: none;
                }
            }

        }
    }

    .popup-footer{
        border-top:1px solid #f6f6f6;
        padding: 11px;
        .pop-ft{
            background-color: #f03867;
            width: 100%;
            height: 42px;
            border-radius: 5px;
            text-align: center;
            font-size: 13px;
            line-height: 42px;
            color: #fff;
        }
    }

}


  .my-swipe .van-swipe-item {
     color: #fff;
     font-size: 20px;
     line-height: 150px;
     text-align: center;
     background-color: #39a9ed;
   }
  .bannerBox{
      width: 375px;
      height:375px;
  }
 .slider{
            // width: 100%;
            // height: 375px;
            position: relative;
            overflow: hidden;

            img{
                width: 100%;
            }
        }
        .custom-indicator>.dios{
            position: absolute;
            bottom: 8px;
            left: 50%;
            transform: translateX(-50%);
        }
        .custom-indicator>.dios>li{
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin: 0 3px;
            float: left;
            background-color: #878584;
        }
        .custom-indicator>.dios>li.con{
            background-color: #10100f;
        }
        .slider>.lefticon{
            width: 40px;
            height: 40px;
            position: absolute;
            top: 10px;
            left: 10px;
            border-radius: 50%;
            background-color: #7f7f7f;
            text-align: center;
        }
        .slider>.lefticon>i{
            line-height: 40px;
            color: #fff;
            font-size: 18px;
        }
        .slider>.righticon{
            position: absolute;
            top: 10px;
            right: 10px;
            width: 53px;
            height: 32px;
            padding: 0 15px;
            border-radius: 16px;
            background-color: #7f7f7f;
            text-align: center;
        }
        .slider>.righticon>i{
            line-height: 32px;
            font-size: 24px;
            color: #f8f4f1;
            
        }
        .slider>.righticon.hasfav>i:nth-child(1){
            color: #dd3d97;;
        }
        
        .slider>.iconSli{
            position: absolute;
            bottom: 42px;
            left: 10px;
            width: 114px;
            height: 42px;
            display: flex;
            align-items: center;
            background-color: rgba(77, 73, 67, 0.8);
            border-radius: 21px;
            
        }
        .slider>.iconSli>img{
            width: 42px;
        }
        .slider>.iconSli>.titleSli{
            font-size: 12px;
            color: #fff;
            margin-left: 4px;
        }
        .price{
            width: 100%;
            height: 74px;
            padding-bottom: 12px;
        }
        .price>.wrap{
            width: 100%;
            height: 74px;
            background-image: url(../assets/image/detail/priceB.webp);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 15px;
            box-sizing: border-box;
        }
        .price>.wrap>.leftp{
            display: flex;
            flex-direction: column;
        }
        .price>.wrap>.leftp>.leftph{
            display: flex;
            margin-bottom: 5px;
        }
        .price>.wrap>.leftp>.leftph>span{
            font-size: 25px;
            color: #fff;

        }
        .price>.wrap>.leftp>.leftph>span>i{
            font-style: normal;
            font-size: 13px;
            color: #fff;
        }
        .price>.wrap>.leftp>.leftph>.lebg{
            height: 20px;
            background-color: #ffedf2;
            margin-left: 20px;
            position: relative;
            padding-left: 5px;
            padding-right: 3px;
            border-radius: 3px;
        }
        .price>.wrap>.leftp>.leftph>.lebg>img{
            position: absolute;
            width: 20px;
            top:0 ;
            left: -15px;
        }
        .price>.wrap>.leftp>.leftph>.lebg>span:nth-child(2)>b{
            /* line-height: 14px; */
            font-size: 13px;
            color: #ce3e5b;
            // vertical-align: top;
        }
        .price>.wrap>.leftp>.leftph>.lebg>span:nth-child(2){
            /* line-height: 20px; */
            font-size: 16px;
            color: #ce3e5b;
        }
        .price>.wrap>.leftp>.leftph>.lebg>span:nth-child(2)>i{
            /* line-height: 20px; */
            font-size: 12px;
            color: #ce3e5b;
        }

        .price>.wrap>.leftp>.leftpb>span:nth-child(1){
            font-size: 12px;
            color: #fff;
            text-decoration: line-through;
        }
        .price>.wrap>.leftp>.leftpb>span:nth-child(2){
            font-size: 12px;
            color: #fff;
             margin-left: 4px; 
        }
        .price>.wrap>.rightp>.righth{
            padding-top: 5px;
            display: flex;
            justify-content: flex-end;
        }
        .price>.wrap>.rightp>.righth>img{
            width: 69px;
            height: 18px;
        }
        .price>.wrap>.rightp>.rightb{
            display: flex;
            font-size: 12px;
            margin-top: 5px;
            color: #fff;
        }
        .van-count-down{
            font-size: 12px;
        }
        // .van-count-down>.countRightb{
        //     transform: scale(0.8);
        // }
        .price>.wrap>.rightp>.rightb span{
            color: #fff;
            margin-left: 3px;
            transform: scale(0.8);
        }
        .price>.wrap>.rightp>.rightb span:last-child{
           margin-left: 6px;
        }
        .shopcontent{
            padding: 0 15px 15px;
        }
        .shopcontent>.conheader>span:nth-child(1){
            font-size: 14px;
            line-height: 26px;
        }
        .shopcontent>.conheader>span:nth-child(2){
            font-size: 16px;
            line-height: 26px;
        }
        .shopcontent>.conbottom{
            display: flex;
            margin-top: 2px;
        }
        .shopcontent>.conbottom>div{
            padding: 0 8px;
            border-radius: 2px;
            overflow: hidden;
            margin-right: 5px;
            background-color: #36c88e;
            text-align: center;
            line-height: 18px;
            color: #fff;
        }
        .shopcontent>.conbottom>div>span{
            font-size: 12px;
            transform: scale(0.8);
        }
        .bgwhite{
            width: 100%;
            height: 8px;
            border-top: 1px solid #e7e7e7;
            background-color: #f3f4f5;
        }
        .product-guaranteed{
            height: 42px;
            display: flex;
            align-items: center;
            padding: 0 15px;
        }
        .product-guaranteed .leftImg{
            height: 14px;
            margin-right: 10px;
        }
        .product-guaranteed .middle{
            font-size: 12px;
            color: #72757b;
            flex: 1;
        }
        .product-guaranteed .rightIcon{
           font-size: 12px;
           color: #72757b;
        }
        .product-sku{
            height: 252px;
            padding-top: 20px;
        }
        .product-sku-color{
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            padding: 0 15px 20px
        }
        .product-sku-color>.sku-color-hd{
            font-size: 14px;
            color: #232323;
            font-weight: 600;
            margin-bottom: 20px;
        }
        .product-sku-color>.sku-color-content{
            display: flex;
            align-items: center;
            width: 103px;
            height: 28px;
            border: 1px solid #ef9ecb;
        }
        .product-sku-color>.sku-color-content>img{
            width: 19px;
           margin:  0 7px;
        }
        .product-sku-color>.sku-color-content>span{
            width: 68px;
            height: 19px;
            font-size: 12px;
            color: #e800a8;
            text-align: center;
            line-height: 19px;
        }
        .product-sku-color>.sku-color-content>i{
            padding-top: 13px;
            color: #de3d96;
        }
        .product-sku-size{
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            padding: 0 0 20px 15px 
        }
        .product-sku-size>.sku-size-hd{
            display: flex;
            justify-content: space-between;
            padding: 0 15px 0 0;
        }
        .product-sku-size>.sku-size-hd>.sku-size-title{
            font-size: 14px;
            color: #232323;
            font-weight: 600;
            margin-bottom: 20px;
        }
        .product-sku-size>.sku-size-hd>.sku-size-link{
            font-size: 12px;
            color:#4c90e2
        }
        .product-sku-size>.sku-size-content{
            display: flex;
            flex-wrap: wrap;
            
        }
        .product-sku-size>.sku-size-content>.vip-grid-option{
            width:103px ;
            height: 30px;
            margin-right: 15px;
            margin-bottom: 12px;
            box-sizing: border-box;
            border: 1px solid #e2e2e2;
            text-align: center;
            position: relative;
        }
        .product-sku-size>.sku-size-content>.vip-grid-option>span{
           line-height: 28px;
           color: #232323;
           font-size: 12px;
        }
        .product-sku-size>.sku-size-content>.vip-grid-option>i{
            display: none;
            position: absolute;
            bottom: 0;
            right: 0;
            color: #de3d96;
        }
        .product-sku-size>.sku-size-content>.vip-grid-option.con>span{
            background-color: hsla(0,0%,95%,.7);
            color: hsla(0,0%,68%,.9);
        }
        .product-sku-size>.sku-size-content>.vip-grid-option.checked{
            border-color:#ef9ecb ;
        }
        .product-sku-size>.sku-size-content>.vip-grid-option.checked>i{
            display: block;
        }
        .product-sku-size>.sku-size-content>.vip-grid-option:last-child{
            margin-bottom: 0;
        }
        .product-param-container{
            height: 50px;
            padding: 0 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .product-param-container>.product-param{
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }
        .product-param-container>.product-param>.product-param-title{
            font-size: 14px;
            /* font-weight: 400; */
            font-weight: bold;
            color: #232323;
            margin-right: 14px;
        }
        .product-param-container>.product-param>.product-param-text{
            font-size: 12px;
            color: #585c64;
        }
        .product-param-container>span{
            width: 18px;
            height: 25px;
            font-size: 20px;
            line-height: 13px;
        }
        .product-address{
            padding: 20px 15px;
            /* border-bottom: 1px solid #f6f6f6; */
            border-bottom: 1px solid #f3f4f5;
        }
        .product-address>.product-address-name{
            display: flex;
            /* align-items: center; */
            /* height: 14px; */
        }
        .product-address>.product-address-name>.product-address-title{
            font-size: 14px;
            font-weight: bold;
            color: #232323;
            margin-right: 14px;
        }
        .product-address>.product-address-name .product-address-text{
            font-size: 12px;
            color: #585c64;
            margin-right: 5px;
            margin-top: 2px
        }
        .product-address-name>i{
            color: #b9bec7;
            font-size: 12px;
        }
        .deliver{
            margin-top: 6px;
            padding-left: 50px;
            font-size: 12px;
            color: #98989f;;
        }
        .product-freight{
            padding: 10px 15px;
        }
        .product-freight>.freight{
            height: 30px;
            display: flex;
            align-items: center;
        }
        .product-freight>.freight>.freight-title{
            font-size: 14px;
            font-weight: bold;
            color: #232323;
            margin-right: 14px;
        }
        .product-freight>.freight>.freight-text{
            font-size: 12px;
            color: #585c64;
            margin-right: 5px;
            flex: 1;
        }
        .product-freight>.freight>span{
            width: 18px;
            height: 25px;
            font-size: 20px;
            line-height: 13px;
        }
        .product-services{
            padding: 10px 15px;
        }
        .product-services>.services-bar{
            display: flex;
            align-items: center;
        }
        .product-services>.services-bar>.services-list{
            display: flex;
            /* align-items: center; */
            flex-wrap: wrap;
        }
        .services-bar>.services-list>.service{
            height: 30px;
            margin-right: 15px;
            position: relative;
        }
        .services-bar>.services-list>.service>i{
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            font-size: 12px;
            color: #e80080;
        }
        .services-bar>.services-list>.service>span{
            margin-left: 15px;
            line-height: 30px;
            font-size: 12px;
            color: #585c64;
            /* margin-right: 5px; */
        }
        .product-services>.services-bar>span{
            width: 18px;
            height: 25px;
            font-size: 20px;
            line-height: 13px;
            margin-right: 4px;
        }
        .product-brand>.brand-hd{
            padding: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #f3f4f5;
        }
        .product-brand>.brand-hd>.brand{
            display: flex;
            align-items: center;
            height: 60px;
        }
        .brand-hd>.brand>.brand-logo{
            display: flex;
            align-items: center;
            width: 60px;
            height: 60px;
            box-sizing: border-box;
            border: 1px solid #e7e7e7;
            margin-right: 11px;
        }
        .brand-hd>.brand>.brand-logo>img{
            width: 60px;
            height: 30px;
        }
        .brand-hd>.brand>.brand-logo>span{
            color: #222;
            font-size: 12px;
        }
        .brand-hd>.brand>.brand-info{
            font-size: 16px;
            color: #222;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .product-brand>.brand-hd>.vipButton{
            width: 64px;
            height: 23px;
            box-sizing: border-box;
            border: 1px solid #f03867;
            color: #f03867;
            background-color: #fff;
            border-radius: 3px;
            text-align: center;
            line-height: 23px;
            font-size: 14px;
        }
        .product-brand>.brand-ft{
            padding: 20px 0;
            text-align: center;
        }
        .product-brand>.brand-ft>span{
            font-size: 14px;
            color: #585c64;
        }
        .product-qa>.top-wrap{
            padding: 20px 15px 5px;
            display: flex;
            justify-content: space-between;
        }
        .product-qa>.top-wrap>.title{
            font-size: 14px;
            color: #232323;
            font-weight: bold;
        }
        .product-qa>.top-wrap>.more{
            font-size: 12px;
            color: #232323;
        }
        .product-qa>.bottom-wrap{
            padding: 10px 15px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }
        .qa-info1,.qa-info2{
            display: flex;
            align-items: center;
            /* height: 30px; */
        }
        .qa-info1>.qa-question{
            height: 16px;
            width: 16px;
            margin: 7px 10px 7px 0;
            background: #8396be;
            color: #fff;
        }
        .qa-info2>.qa-question{
            height: 16px;
            width: 16px;
            margin: 7px 10px 7px 0;
            background: #e6e8f4;
            color: #8396be;
        }
        .qa-info1>.qa-fold,.qa-info2>.qa-fold{
            color: #585c64;
            font-size: 12px;
        }
        /* .product-image{
           
        } */
        .product-image>.title{
            padding: 20px 15px;
            color: #222;
            font-size: 14px;
            font-weight: 700;
        }
        .product-image>img{
            width: 100%;
        }
        .product-sale-price{
            padding: 0px 15px 20px
        }
        .product-sale-price>.title{
            font-size: 14px;
            font-weight: 700;
            color: #222;
          
        }
        .product-sale-price>.content>p{
            margin-top: 15px;
            color: #585c64;
            font-size: 12px;
        }
        .product-sale-price>.btn{
            margin-top: 15px;
            text-align: right;
        }
        .product-sale-price>.btn>span{
            font-size: 12px;
            color: #98989f;
        }
        .product-sale-price>.btn>span.con{
            display: none;
        }
        .product-sale-price>.btn>span>i{
            margin-left: 3px;
        }
        .product-indicator{
            font-size: 12px;
            color: #98989f;
            line-height: 40px;
            text-align: center;
            background-color: #f3f4f5;
        }
        .product-cart{
            // min-width: 320px;
            // max-width: 750px;
            // width: 100%;
            position: fixed;
            bottom: 0;
            left: 0;
            padding: 5px 15px;
            border-top: 1px solid #e7e7e7;
            background-color: #fff;
        }
        .product-cart>.cart-box{
            display: flex;
            align-items: center;
        }
        .product-cart>.cart-box>.price-detail{
            height: 55px;
            width: 250px;
           overflow: hidden;
           border-radius: 5px;
           display: flex;
        }
        .product-customer-bar>.custom-icon{
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-right: 19px;
        }
        .product-customer-bar>.custom-icon>.custom-icon__image{
            width: 22px;
            height: 22px;
            background: url("../assets/image/detail/kefu.png") no-repeat 0 0/cover;
        }
        .product-customer-bar>.custom-icon>.custom-icon__text{
            font-size: 12px;
        }

        .product-cart-icon>.product-cart-icons{
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-right: 16px;
        }
        .product-cart-icon>.product-cart-icons>.product-cart-icon__image{
            width: 22px;
            height: 22px;
            background: url("../assets/image/detail/shopcar.png") no-repeat 0 0/cover;
        }
        .product-cart-icon>.product-cart-icons>.product-cart-icon__text{
            font-size: 12px;
            margin-top: 2px;    
        }
        .price-detail>.price-detail__compare-price{
            height: 55px;
            width: 112.5px;
            background-color: rgba(246, 136, 164, 0.8);
            text-align: center;
            line-height: 55px;
        }
        .price-detail>.price-detail__compare-price>p{
            font-size: 20px;
            color: #fff;
            text-decoration: line-through;
        }
        .price-detail>.price-detail__final-price{
            /* height: 55px; */
            width: 137.5px;
            background-color: #f03b67;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
        }
        .price-detail>.price-detail__final-price>p:nth-child(1){
            font-size: 20px;
            color: #fff;
        }
        .price-detail>.price-detail__final-price>p:nth-child(2){
            margin-top: 5px;
            font-size: 14px;
            color: #fff;
            display: flex;
        }
        .price-detail>.price-detail__final-price>p:nth-child(2)>span{
            margin-right: 3px;
        }
        .product-baibian{
            height: 120px;
            background-color: #f3f4f5
        }
        .topbackicon{
            width: 45px;
            height: 45px;
            position: fixed;
            bottom: 76px;
            right: 15px;
            background-color: #23232b;
            border-radius: 50%;
            overflow: hidden;
            z-index: 100;
        }
        .topbackicon>a{
             display: block;
             height: 100%;
             width: 100%;
             color: #fff;
             text-align: center;
             font-size: 23px;
             line-height: 45px;
        }



.van-popup ::v-deep .van-cascader__title{
    flex:1;
    text-align: center;

}

}
</style>